<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>像素化</title>
	<link rel="stylesheet/less" type="text/css" href="test.less"></link>
</head>
<body >
	<div id="container" class="container">
	</div>
	<img id="img" src="" alt="">
	
	<div id="arrow" class="arrow"></div>
	<div id="box" class="box" style="display: none;"></div>
</body>
<script src="less.js"></script>
<script src="jquery.min.js"></script>
<script src="constant2.js"></script>
<script>
const IMGURL = "口袋妖怪绿宝石721EX（2.27）汉化版.png"
const maxWidth = 240 *3
const bannelLength = 156		//400 / 256
const bannelNum = BANNELMAP[bannelLength]		
var array1 = [];
var array2 = [];

var flag = false // 横向是否调整适应背板填满
var realWidth = flag ? Math.floor(maxWidth/bannelLength) * bannelLength : maxWidth
var realHeight = 0
var columns = Math.round(realWidth/mLength)
var rows = 0

$("#img").attr("src",`./img/${IMGURL}`).attr("width",realWidth)
$("#container").css("background",`url(./img/${IMGURL}) no-repeat`)
				.css("background-size",`${realWidth}px`)
				.css("grid-template-columns",`repeat(${columns}, ${mLength}px)`)
window.onload = function(){
	realHeight = $("#img").height()
	rows = Math.round(realHeight/mLength)
	$("#container").css("grid-template-rows",`repeat(${rows}, ${mLength}px)`)
	init()
}

	function init() {
		var img = document.getElementById('img');
		var container = document.getElementById('container');
		var canvas = draw(img);
		// img.style.display = 'none'

		for (let i = 0; i < columns*rows; i++) {
			$("#container").append("<div></div>")
		}
		$("#container div").each((i,v)=>{
			var x = v.offsetLeft
			var y = v.offsetTop
			var color = (canvas.getColor(x, y)).rgba
			var obj = getListColor(color)
			v.id = i
			v.style.background = obj.rgb	//color/obj.rgb
			// v.style.background = color	
			makeArray(i, obj.name);
		})
		
		$("#box").append(`<div"><input type="checkbox"/><span>作图</span></div>`);
		for (let i = 0; i < COLORLIST.length; i++) {
			var { name, rgb } = COLORLIST[i];
			$("#box").append(`<div style="background:${rgb}"><input type="radio" name="radio" id="${name}" value="${rgb}"/><span>${name}</span></div>`);
		}
		
	}
	
	$("#container").on("click", "div", (e) => {
		if( $('input[type=checkbox]:checked')[0] && $("input[type=radio]:checked")[0]){
			var {id, value} = $("input[type=radio]:checked")[0]
			e.target.style.background = value
			makeArray(e.target.id, id)
		}
	});
	$("#arrow").click(e => $("#box").toggle())
	
	function makeArray(i,name){
		var arr_y = Math.floor(i/columns), arr_x = i%columns
		if(!array1[arr_y]){
			array1[arr_y] = []
		}
		array1[arr_y][arr_x] = name

		var block_y = Math.floor(arr_y/bannelNum), block_x = Math.floor(arr_x/bannelNum) 
		var block_num = block_y*Math.ceil(columns/bannelNum) + block_x
		var arr_offset_x = arr_x%bannelNum, 
			arr_offset_y = arr_y%bannelNum 
		if(!array2[block_num]){
			array2[block_num] = []
		}
		if(!array2[block_num][arr_offset_y]){
			array2[block_num][arr_offset_y] = []
		}
		array2[block_num][arr_offset_y][arr_offset_x] = name
	}
	function draw (img) {
        var style = window.getComputedStyle(img);
        var width = parseInt(style.width, 10);
        var height = parseInt(style.height, 10);
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, realWidth, realHeight);
        // 获取坐标颜色
        function getPixelColor (x, y) {
			var imageData = ctx.getImageData(x, y, 1, 1);
			var pixel = imageData.data;
			var r = pixel[0];
			var g = pixel[1];
			var b = pixel[2];
			var a = pixel[3] / 255;
			a = Math.round(a * 100) / 100;
			var rHex = r.toString(16);
			r < 16 && (rHex = "0" + rHex);
			var gHex = g.toString(16);
			g < 16 && (gHex = "0" + gHex);
			var bHex = b.toString(16);
			b < 16 && (bHex = "0" + bHex);
			var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
			var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
			var hexColor = "#" + rHex + gHex + bHex;
			return {
				rgba: rgbaColor,
				rgb: rgbColor,
				hex: hexColor,
				r: r,
				g: g,
				b: b,
				a: a
			};
        }
        return {
          getColor: getPixelColor,
        };
	}

	function getListColor(color) {
		var rgb_Arr = color.split(",").map((v)=>v.replace(/[^0-9]/ig,""))
		var minVal = 3000000, rgb = [], name = "";
		for (let j = 0; j < COLORLIST.length; j++) {
			var arr = COLORLIST[j].rgb.split(",").map((v)=>v.replace(/[^0-9]/ig,""))
			var value = (arr[0]-rgb_Arr[0])*(arr[0]-rgb_Arr[0]) + 
						(arr[1]-rgb_Arr[1])*(arr[1]-rgb_Arr[1]) +
						(arr[2]-rgb_Arr[2])*(arr[2]-rgb_Arr[2])
			if( value < minVal ){
				rgb = COLORLIST[j].rgb, minVal = value, name = COLORLIST[j].name
			}
		}
		return {rgb, name}
	}
</script>

</html>